<template>
    <div class="sub-two">
        <div class="goods-list">
            <div class="goods-item" v-for="item in dataList" :key="item.id" @click="gotoDetail(item)">
                <img :src="item.full_cover" alt="">
                <div class="goods-title">{{ item.title }}</div>
                <div class="goods-info">
                    <div class="goods-price">￥{{ item.price }}</div>
                    <div class="goods-time">{{ item.class }}课时</div>
                </div>
            </div>
        </div>
        <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page />
    </div>
</template>

<script>
import { getvideoCoursesList } from '@/api/index.js'
export default {
    props: {
        subject: {
            type: Number,
            require: true
        }
    },
    data() {
        return {
            dataList: [],
            page: 1,
            limit: 8,
            total:0
        }
    },
    watch:{
        subject:{
            handler(val,oldval) {
                if(val != oldval){
                    this.init()
                }
            },
            deep:true
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            let that = this
            getvideoCoursesList({ subject: this.subject,page:this.page,limit:this.limit }).then(res=>{
                that.dataList = res.list
                that.total = res.total
                // console.log(66,res)
            })
        },
        gotoDetail(item) {
            this.$router.push({
                path: '/SubTwoDetail',
                query: {
                    item
                }
            })
        }
    }
}
</script>

<style lang="scss">
.goods-list {
    padding: 4.4vh 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .goods-item {
        width: 22%;
        box-shadow: 0px 3px 10px 0px rgba(153, 153, 153, 0.1);
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        margin-bottom: 2vh;
        user-select: none;

        >img {
            width: 100%;
        }

        >div {
            padding: 2%;
        }

        .goods-title {
            color: #333333;
            font-size: 1.8vh;
        }

        .goods-info {
            display: flex;
            justify-content: space-between;

            .goods-price {
                color: #FF6D6A;
                font-size: 2vh;
            }

            .goods-time {
                color: #999999;
                font-size: 1.6vh;
            }
        }
    }
}
</style>